<template>
  <div class="channel">
    <van-cell title="我的频道">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #default>
        <van-button
          size="mini"
          plain
          type="danger"
          @click="iconShow = !iconShow"
          >{{ iconShow ? '取消' : '编辑' }}</van-button
        >
      </template>
    </van-cell>
    <!-- 频道内容 -->
    <van-grid :column-num="4" direction="horizontal" class="myChannels">
      <van-grid-item
        v-for="(item, index) in channels"
        :key="item.id"
        @click="changeIndex(index)"
      >
        <template #text>
          <span :class="{ active: index === active }"> {{ item.name }} </span>
          <van-icon
            @click="del(index, item.id)"
            class="myIcon"
            v-if="iconShow && index != 0"
            name="cross"
          />
        </template>
      </van-grid-item>
      <!-- 注意如果是插槽要用双标签包裹起来 -->
    </van-grid>
    <!-- 可选频道 -->
    <van-cell title="可选频道"></van-cell>
    <van-grid :column-num="4">
      <van-grid-item
        v-for="item in selectChannels"
        :key="item.id"
        :text="item.name"
        @click="add(item)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannelsApi, addChanneslApi, delChannelsApi } from '@/api'
import { setChannels } from '@/utils/channels'

export default {
  name: 'MyChannel',
  data () {
    return {
      allChannels: [],
      iconShow: false
    }
  },
  async created () {
    // 得到所有频道数据
    const res1 = await getAllChannelsApi()
    // console.log(res1.data)
    this.allChannels = res1.data.data.channels
    console.log(this.allChannels)
  },
  props: {
    channels: {
      required: true
    },
    active: {
      required: true
    }
  },
  // props: ['channels', 'active'],
  methods: {
    async add (item) {
      //   实现点击可选频道，会把频道添加到我的频道中，并且在可选频道中消失
      this.channels.push(item)
      // 判断是否登录
      const token = this.$store.state.token.token
      if (token) {
        // 存在，将数据保存到服务器中
        const res = await addChanneslApi({
          channels: [{ id: item.id, seq: this.channels.length }]
        })
        console.log(res)
      } else {
        // 将数据保存到localstorage中
        setChannels(this.channels)
      }
    },
    async del (index, id) {
      if (index < this.active) {
        this.$emit('input', this.active - 1)
      }
      this.channels.splice(index, 1)
      this.$toast('删除成功')
      // 删除后的数据持久化
      const token = this.$store.state.token.token
      if (token) {
        // 已登录，将数据提交到服务器
        const res = await delChannelsApi(id)
        console.log(res)
      } else {
        setChannels(this.channels)
      }
    },
    changeIndex (index) {
      this.$emit('input', index)
    }
  },
  computed: {
    selectChannels: function () {
      // 先得到user中频道数据的id集合
      const ids = this.channels.map((item) => {
        return item.id
      })
      // 定义一个新数组用来接收
      const newArr = []
      this.allChannels.forEach((item) => {
        if (!ids.includes(item.id)) {
          // 如果所有频道中的id不存在我的频道ids集合中，说明item不是我的频道中数据，即是可选频道中的数据
          newArr.push(item)
        }
      })

      // 最后返回新数据
      return newArr
    }
  }
}
</script>

<style lang="less">
.channel {
  .myChannels {
    position: relative;
    font-size: 12px;
    .active {
      color: red;
    }

    .myIcon {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
